<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../css/tab/friend.css" />
		<link rel="stylesheet" type="text/css" href="../../css/global/index.css" />
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/plugin/flexible.debug.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/plugin/flexible_css.debug.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<header class="header bg-c4">
			<h1 class="title">朋友</h1>
			<div class="icon-item">
				<img src="../../images/home/txl.png">
			</div>
			<div class="icon-item">
				<img src="../../images/home/txl.png">
			</div>
		</header>
		<div class="search bg-c1">
			<input type="text" placeholder="搜索">
			<i class="mui-icon mui-icon-search"></i>
		</div>
		<section class="nav bg-c1">
			<div class="nav-item bd-r">
				<a href="">
					<i class="friend-icon"></i>
					<h2>添加朋友</h2>
					<span>和朋友一起聊天</span>
				</a>
			</div>
			<div class="nav-item bd-r">
				<a href="">
					<i class="txl-icon"></i>
					<h2>通讯录</h2>
					<span>已添加的好友</span>
				</a>
			</div>
			<div class="nav-item">
				<a href="">
					<i class="circle-icon"></i>
					<h2>生活圈</h2>
					<span>和朋友分享生活</span>
				</a>
			</div>
		</section>
		<section class="txl-list bg-c1" id="txl-content">
			<script id="test" type="text/html">
				{{each data as value i}}
			<div class="txl-item">
				<div class="photo">
					<img src={{value.img}} alt="">
				</div>
				<div class="item-right">
					<hgroup>
						<strong>{{value.name}}</strong>
						<time>{{value.time}}</time>
					</hgroup>
					<p>{{value.explain}}</p>
				</div>
			</div>
			{{/each}}
			</script>
		</section>
	</body>
	<script src="../../js/plugin/template.js"></script>
	<script src="../../js/tab/friend.js"></script>
</html>
